<template>
    <el-form :inline="true" :model="formData" class="demo-form-inline">
        <el-form-item label="父类">
            <CategoryTreeVue v-model:modelValue="formData.categoryId"></CategoryTreeVue>
        </el-form-item>
        <el-form-item label="名称">
            <el-input v-model="formData.name" placeholder="请输入关键字"/>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="id" label="编号" width="80"/>
        <el-table-column fixed prop="name" label="名称" width="120"/>
        <el-table-column prop="img" label="图片" width="120">
            <template #default="scope">
                <img :src="scope.row.img.split(',')[0]" width="50" height="50"/>
            </template>
        </el-table-column>
        <el-table-column prop="statusX" label="状态" width="120"/>
        <el-table-column prop="seq" label="排序" width="120"/>
        <el-table-column prop="lastUpdateBy" label="最近更新人" width="200" :formatter="formatter"/>
        <el-table-column prop="lastUpdateTime" label="最近更新时间" width="180" :formatter="formatter"/>
        <el-table-column fixed="right" label="操作" width="220">
            <template #default="scope">
                <el-button type="primary" size="small" @click="editClick(scope.row)">编辑</el-button>
                <el-button type="danger" size="small" v-if="scope.row.status!=1"
                           @click="optionClick(scope.row,'上线',1)">上线
                </el-button>
                <el-button type="danger" size="small" v-if="scope.row.status!=5"
                           @click="optionClick(scope.row,'下线',5)">下线
                </el-button>
                <el-button type="danger" size="small" v-if="scope.row.status!=10"
                           @click="optionClick(scope.row,'禁售',10)">禁售
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <br/>
    <el-pagination background layout="prev, pager, next" :total="pageData.total" :page-size="pageData.pageSize"
                   @current-change="currentChange"/>
</template>

<script setup lang="ts">
import {ref, onMounted, reactive} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import dayjs from "dayjs";
import {productApi} from '@/api'
import {useRouter} from 'vue-router'
import CategoryTreeVue from "@/components/CategoryTree.vue";

const router = useRouter()
const tableData: any = ref([])
const pageData = reactive({
    total: 0,
    pageSize: 10,
    pageNum: 1
})
const formData = reactive({
    name: '',
    categoryId: 0
})

const currentChange = (num: number) => {
    console.log(num);
    pageData.pageNum = num
    callProductApi()
}
onMounted(() => {
    callProductApi()
})

const formatter = (row: any, column: any, cellValue: any, index: any) => {
    if (column.property === "lastUpdateTime") {
        return dayjs(cellValue).format('YY年MM月DD日 HH:mm')
    }
    if (column.property === "lastUpdateBy") {
        return cellValue + "：小弟"
    }
}


const callProductApi = () => {
    let name = formData.name === "" ? undefined : formData.name
    let categoryId = formData.categoryId === 0 ? undefined : formData.categoryId
    productApi.select.call({
        categoryId: categoryId,
        name: name,
        pageNum: pageData.pageNum,
        pageSize: pageData.pageSize
    }).then((res: any) => {
        tableData.value = res.items
        pageData.total = res.total

    })
}
const onSubmit = () => {
    callProductApi()
}

const editClick = (row: any) => {

    router.push({name: "product-edit", query: {id: row.id}})
}

const optionClick = (row: any, optionName: string, status: number) => {

    ElMessageBox.confirm(
        '你确定要' + optionName + '?' + row.name,
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            productApi.patch.call({id: row.id, status: status}).then((res: any) => {
                ElMessage.success(optionName + "成功")
                console.log(res)
                callProductApi()
            })
        })
}


</script>